import Vue from 'vue' // v: 2.6.10

// 引入重置类的样式
import 'normalize.css/normalize.css'

// 引入 ElementUI v：2.13.2
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// en 表示英文（在从 elementUI 中引入英文语言包）
// zh-CN 表示中文
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n 18种语言

// 自定义的全局样式
import '@/styles/index.scss'

import App from './App'
import store from './store'
import router from './router'

// 引入 icons 图标
import '@/icons' // icon

// 权限控制
import '@/permission'

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */

// process 是 node 语法
// process.env -> 是可以查看当前工程所运行的环境（开发环境、线上环境）
// process.env.NODE_ENV 可以查看当前工程所运行的环境的
// 开发环境：'development'
// 线上环境：'production'

// console.log('当前环境', process.env.NODE_ENV)

// 这里判断了，如果当前运行环境是线上的话，内部用了 mock 模拟数据的
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// set ElementUI lang to EN 让 elementUI 组件默认设置为英文了
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

// 注册自定义指令 控制功能权限

Vue.directive('permission', {
  // 会在指令作用的元素插入dom之后执行
  inserted(el, bingding) {
    const points = store.state.user.userInfo?.roles?.points || []
    if (!points.includes(bingding.value)) {
      el.remove()
      el.disabled = true
    }
  }
})
// 实例化 vue
new Vue({
  el: '#app', // 指定容器为 id = app 的 div
  router,
  store,
  // render 函数，h 方法（用来渲染 App 组件到 id 为 app 的那个dive 里面去的）
  render: h => h(App)
})

// SPA 项目，就只有一个 html 页面，都是 div 之间的切换和隐藏

// 0、要删除 .git 隐藏文件
// 1、先 down 项目（跑到期间需要降 core-js 版本：npm install core-js@3.25.5）
// 2、正常运行能看到基础默认页面算成功

// node 版本：不要太高，正常保持：16.xx.xx
// 把node版本，装到 16.xx

// 卸载 -> 找到控制面板 -> 类别 -> nodejs   卸载之后重装一个低版本的就可以了
// 权限问题：可以用管理员身份
// 360电脑管家，腾讯管家都卸掉

// 3、检查自身的格式化工具：eslint + prettier 配置使用

/**
 * 4、项目目录：重点先关心 src 文件夹
 *  api 封装请求相关的（方法 -> 请求方式、请求地址、请求参数）
 *  assets 文件资源（字体文件，图片，svg图片）
 *  components 全局组件
 *  icons 项目里面的所有小图标也全部单独放到一个文件夹里面去管理了
 *  layout 用来统一项目里面的布局的（包括顶部导航栏，左边的侧边栏，右边的主题区域）（代码比较多，比较复杂）
 *  router 跟路由相关的
 *  store 大概分了三个模块
 *  styles 根项目项目相关的样式文件
 *  utils 帮助类，提供了很多的可以直接使用的方法
 *  views 项目里面的页面相关 (pages)
 *  App.vue 根组件
 *  main.js 是工程的主入口文件（你拿到任何第一个陌生的工程，首先观察：package.json -> 启动、依赖等 ）
 *  permission.js 做页面权限控制的
 *  settings.js 做工程相关的设置
 */
